<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>积分记录</title>
    <script src="js/jquery.min.js"></script>
    <script>
        //页面加载时触发
        $(function(){
            //查询订单记录的接口
            queryOrderList();
        });

        //查询欢乐豆流水列表
        function queryOrderList(){
            //获取当前登录用户id
            var uid = localStorage.getItem("uid");
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/order/list",
                data: {
                    uid: uid
                },
                success: function(data){
                    console.log(data);

                    //data -> 记录列表
                    //for -> data -> <tr></tr> -> <tbody>
                    for(var i=0;i<data.length;i++){
                        var item = data[i];

                        // var status="";
                        // if(item.status==0){
                        // 	status="未支付";
                        // }else if(item.status==1){
                        // 	status="已支付";
                        // }
                        var html = "<tr><td>" + item.orderId + "</td> <td>"
                            + item.money + "</td> <td>"
                            + item.beanNumber + "</td> <td>"
                            // + status + "</td><td>"
                            + item.createTime + "</td> <td>"
                            + (item.status== 1 ? "已支付" : "<button onclick =\"goPay('"+ item.orderId+ "')\"> 去支付 </btton>")+ "</td> </tr>";
                        $("#mytbody").append(html);

                    }
                }
            });
        }
        function goPay(orderId){
            alert("去支付"+orderId);
        }
    </script>
</head>
<body>
<h1>欢乐豆记录列表</h1>

<table border="1">
    <thead>
    <tr>
        <td>订单号</td>
        <td>订单金额</td>
        <td>积分获取</td>
        <td>下单时间</td>
        <td>订单支付</td>
    </tr>
    </thead>
    <tbody id="mytbody">

    </tbody>
</table>
</body>
</html>